<template>
  <div id="personal">
    <div class="narrow-content">
      <div class="user-header clearfix">
        <div class="profilepic">
          <a><img src="../assets/img/user.jpg"/></a>
        </div>
        <div class="user-info">
          <h3 class="user-name">随心前行的唐子清</h3>
          <div class="user-info-list">
            <span>文章&nbsp
              <nobr>3</nobr>
            </span>
            <span>字数&nbsp<nobr>4.8K</nobr></span>
            <span>喜欢&nbsp
              <nobr>3</nobr>
            </span>
          </div>
        </div>
        <router-link class="btn manage-btn" to="edit">新建文章</router-link>
      </div>
      <nav class="user-nav">
        <router-link to="myindex" class="on">我的文章</router-link>
        <router-link to="mydynamic" class="new-message">最新动态</router-link>
        <router-link to="myfavorite">喜欢的文章</router-link>
      </nav>

      <section class="user-article-wrapper">
        <div class="myarticle-list  clearfix">
          <div class="article-title">
            <span>原创</span>
            <router-link to="details">快速软件开发第一部分有效开发完成</router-link>
          </div>
          <div class="article-text">
            <p>前两天接到了公司一位刚来不久的员工递交的辞职信，与之前我收到过的辞职信相比，我反倒觉得这封辞职信写得干脆利落，可就是有些不切实际。
              辞职的原因很简单，此员工即将二十岁，还依旧一无所成，拿着不尽人意的薪水。他特别想改变现状，争取在二十一岁的时候能拥有自己的事业，所以经过再三思量后选择了辞职，然后去做自己爱做的事。
              当我看完这封辞职信以后，心里竟然有些难受，因为在他的信里我看到了自己当年刚跨出校门的影子。那时的自己不就是这样么，一心想着急于求成，想着做出一番属于自己事业，因为看不起微薄的薪水所以自己与朋友选择合伙创业，可终究因为经验的欠缺而血本无归。后来因为不服输的精神再次做起了小买卖，终究还是因为经验的欠缺导致结果然并卵。﻿﻿</p>
          </div>
          <div class="article-meta-left">
            <router-link to="details"><i class="fa fa-eye fa-lg"></i> 42</router-link>
            <a><i class="fa fa-heart-o fa-lg"></i> 2</a>
            <router-link to="details#comments"> <i class="fa fa-commenting-o fa-lg"></i> 1</router-link>
          </div>
          <div class="article-meta-right">
            <p>12小时前</p>
          </div>
          <div class="operation">
            <a href="#" class="edit">编辑</a>
            <a href="#" class="delete" data-toggle="modal" data-target="#deleteModal">删除</a>
          </div>

        </div>

        <div class="myarticle-list  clearfix">
          <div class="article-title">
            <span>原创</span>
            <router-link to="details">快速软件开发第一部分有效开发完成</router-link>
          </div>
          <div class="article-text">
            <p>前两天接到了公司一位刚来不久的员工递交的辞职信，与之前我收到过的辞职信相比，我反倒觉得这封辞职信写得干脆利落，可就是有些不切实际。
              辞职的原因很简单，此员工即将二十岁，还依旧一无所成，拿着不尽人意的薪水。他特别想改变现状，争取在二十一岁的时候能拥有自己的事业，所以经过再三思量后选择了辞职，然后去做自己爱做的事。
              当我看完这封辞职信以后，心里竟然有些难受，因为在他的信里我看到了自己当年刚跨出校门的影子。那时的自己不就是这样么，一心想着急于求成，想着做出一番属于自己事业，因为看不起微薄的薪水所以自己与朋友选择合伙创业，可终究因为经验的欠缺而血本无归。后来因为不服输的精神再次做起了小买卖，终究还是因为经验的欠缺导致结果然并卵。﻿﻿</p>
          </div>
          <div class="article-meta-left">
            <router-link to="details"><i class="fa fa-eye fa-lg"></i> 42</router-link>
            <a><i class="fa fa-heart-o fa-lg"></i> 2</a>
            <router-link to="details#comments"> <i class="fa fa-commenting-o fa-lg"></i> 1</router-link>
          </div>
          <div class="article-meta-right">
            <p>12小时前</p>
          </div>
          <div class="operation">
            <a href="#" class="edit">编辑</a>
            <a href="#" class="delete" data-toggle="modal" data-target="#deleteModal">删除</a>
          </div>

        </div>

        <div class="myarticle-list  clearfix">
          <div class="article-title">
            <span>原创</span>
            <router-link to="details">快速软件开发第一部分有效开发完成</router-link>
          </div>
          <div class="article-text">
            <p>前两天接到了公司一位刚来不久的员工递交的辞职信，与之前我收到过的辞职信相比，我反倒觉得这封辞职信写得干脆利落，可就是有些不切实际。
              辞职的原因很简单，此员工即将二十岁，还依旧一无所成，拿着不尽人意的薪水。他特别想改变现状，争取在二十一岁的时候能拥有自己的事业，所以经过再三思量后选择了辞职，然后去做自己爱做的事。
              当我看完这封辞职信以后，心里竟然有些难受，因为在他的信里我看到了自己当年刚跨出校门的影子。那时的自己不就是这样么，一心想着急于求成，想着做出一番属于自己事业，因为看不起微薄的薪水所以自己与朋友选择合伙创业，可终究因为经验的欠缺而血本无归。后来因为不服输的精神再次做起了小买卖，终究还是因为经验的欠缺导致结果然并卵。﻿﻿</p>
          </div>
          <div class="article-meta-left">
            <router-link to="details"><i class="fa fa-eye fa-lg"></i> 42</router-link>
            <a><i class="fa fa-heart-o fa-lg"></i> 2</a>
            <router-link to="details#comments"> <i class="fa fa-commenting-o fa-lg"></i> 1</router-link>
          </div>
          <div class="article-meta-right">
            <p>12小时前</p>
          </div>
          <div class="operation">
            <a href="#" class="edit">编辑</a>
            <a href="#" class="delete" data-toggle="modal" data-target="#deleteModal">删除</a>
          </div>

        </div>
        <!-- Modal -->
        <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                  aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">确认</h4>
              </div>
              <div class="modal-body">
                <p>你确定要删除这篇文章吗？</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">删除</button>
              </div>
            </div>
          </div>
        </div>

      </section>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'myindex',
    data(){
      return{

      }
    },
    created(){
      this.$http.get('http://172.17.140.113:8360/api/posts/my').then(response => {
        if (response.body && response.body.errno != 0) {
          let msg = response.body ? response.body.errmsg : '请求异常！！！'
          console.log(msg)
          return
        }
        try {
          response = response.body.data
          console.dir(response)

        }
        catch(e){
          console.log("error")
        }

      }, response => {
        console.log(response)
      });
    },
  }
</script>

<style scoped>
  /*公共头部，可考虑组件化*/

  .narrow-content {
    margin: 40px auto;
    max-width: 840px;
    position: relative;
  }
  .user-header {
    width: 100%;
    height: auto;
    padding: 0 20px 20px;
  }

  .profilepic {
    width: 150px;
    height: 150px;
    line-height: 100px;
    float: left;
  }

  .profilepic img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .user-info {
    float: left;
    margin-left: 20px;
  }

  .user-name {
    margin: 0;
    line-height: 90px;
    font-size: 30px;
    font-weight: 700;
    color: #333;
  }

  .user-info-list {
    line-height: 20px;
  }

  .user-info-list a, .user-info-list span {
    margin-right: 20px;
    font-size: 19px;
    width: 72px;
    height: 36px;
    color: #777;
    font-weight: 500;
  }

  .user-info-list nobr {
    color: #000;
  }

  .manage-btn {
    float: right;
    text-align: center;
    width: 130px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    margin: 55px 0;
    background: #387aff;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
  }

  .user-nav {
    width: 100%;
    height: 80px;
    background: #fff;
    margin: 20px 0;
    border: 1px solid #e5e8ef;
    border-radius: 3px;
  }

  .user-nav a {
    display: inline-block;
    position: relative;
    margin: 0 46px;
    line-height: 76px;
    font-size: 16px;
    color: #404452;
  }
  .user-nav a:hover {
      color: #387aff;
    }
  .user-nav .on {
    color: #387aff;
    border-bottom: 3px solid #387aff;
  }

  .new-message:after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-color: #ed1c24;
    position: absolute;
    right: -10px;
    top: 20px;
    border-radius: 50%;
  }
  /*公共部分结束*/

  .myarticle-list {
    width: 100%;
    padding: 36px 30px 30px;
    margin-top: 20px;
    background: #fff;
    position: relative;
    border: 1px solid #e5e8ef;
    border-radius: 3px;
  }

  .myarticle-list:hover .article-meta-right {
    opacity: 0;
  }

  .myarticle-list:hover .operation {
    display: block;
  }

  .article-title {
    padding: 10px 0;
  }

  .article-title span {
    display: inline-block;
    vertical-align: text-bottom;
    background: #febb50;
    color: #fff;
    padding: 3px 6px;
    margin-right: 8px;
    border-radius: 4px;
  }

  .article-title a {
    font-weight: 600;
    font-size: 26px;
    color: #666;
  }

  .article-text p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    color: #777;
    line-height: 24px;
    padding-left: 0;
    margin-bottom: 30px;
  }

  .article-cover img {
    width: 100%;
    height: 140px;
  }


  .article-meta a {
    color: #777;
    margin-right: 14px;
    display: inline-block;
  }

  .article-meta i {
    top: 2px;
    margin-right: 4px;
  }

  .article-meta a, .article-meta a:hover {
    transition: .1s ease-in;
    -webkit-transition: .1s ease-in;
    -moz-transition: .1s ease-in;
    -o-transition: .1s ease-in;
    -ms-transition: .1s ease-in;
  }



  .article-meta-left {
    padding-right: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    float: left;
  }

  .article-meta-left a {
    color: #777;
    margin-right: 14px;
    display: inline-block;
  }

  .article-meta-left i {
    top: 2px;
    margin-right: 4px;
  }

  .article-meta-left a, .article-meta-left a:hover {
    transition: .1s ease-in;
    -webkit-transition: .1s ease-in;
    -moz-transition: .1s ease-in;
  }

  .article-meta-right {
    float: right;
    color: #777;
    opacity: 1;
  }

  .article-meta-right p {
    margin: 0 10px 0 0;
  }



  .operation {
    position: absolute;
    right: 40px;
    bottom: 30px;
    display: none;
  }

  .operation a {
    display: inline-block;
    width: 50px;
    text-align: right;
  }

  .edit {
    color: #387aff;
    cursor: pointer;
  }

  .delete {
    color: #ff0000;
    cursor: pointer;
    outline: none;
  }

  .comment-list .author-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .comment-reply a {
    display: inline-block;
    width: 50px;
    line-height: 20px;
    font-size: 16px;
  }

  @media screen and (max-width: 768px) {
    .user-header {
      padding: 0 0 0 20px;
    }
    .user-info {
      margin-left: 14px;
    }
    .user-info-list a, .user-info-list span {
      margin-right: 10px;
      font-size: 14px;
    }

    .profilepic {
      width: 60px;
      height: 60px;
      line-height: 60px;
    }

    .user-name {
      font-size: 22px;
      line-height: 40px;
    }

    .manage-btn {
      display: none;
    }

    .user-nav {
      height: 60px;
    }

    .user-nav a {
      margin: 0 10px;
      line-height: 57px;
    }

    .myarticle-list {
      width: 100%;
      padding: 18px 15px 15px;
      margin-top: 20px;
      background: #fff;
      position: relative;
      border: 1px solid #e5e8ef;
      border-radius: 3px;
    }

    .article-text p {
      padding-right: 0;
      margin-bottom: 20px;
    }

    .comment-phone-reply a {
      display: inline-block;
      width: 50px;
      line-height: 20px;
      font-size: 16px;
    }

    .operation {
      position: absolute;
      right: 40px;
      bottom: 16px;
    }

    .edit {
      opacity: 0;
    }
  }
</style>
